<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>map-demo</title>
    <style>
        #map-container {
            height: 100vh;
        }
    </style>
</head>

<body>
    <div id="map-container"></div>
    <script src="../../src/lbs/tools.js"></script>
    <script src="../../src/lbs/LBS.js"></script>
    <script>
        LBS.importAMap({ plugins: ['Map3D', 'AMap.DistrictSearch', 'AMap.DistrictLayer', 'AMap.ControlBar', 'AMap.MarkerClusterer'] }).then(start);

        function start() {
            var map = new AMap.Map('map-container', {
                center: [108.93962, 34.3433],
                zoom: 11
            });

            map.on('click', e => {
                console.log(e.lnglat.toString());
            })

            LBS.drawMarkers(map, [
                {
                    position: [109.279166, 34.283466],
                    icon: '//vdata.amap.com/icons/b18/1/2.png',
                    name: 'a',
                    label: 'A'
                },
                {
                    position: [109.212562, 34.268146],
                    icon: '//vdata.amap.com/icons/b18/1/2.png',
                    name: 'a',
                    label: 'A'
                },
                {
                    position: [108.871985, 34.464821],
                    icon: '//vdata.amap.com/icons/b18/1/2.png',
                    name: 'a',
                    label: 'A'
                }
            ]);

            LBS.drawCircleMarkers(map, [
                {
                    position: [109.112998, 34.390626],
                    radius: 5000,
                    color: 'red'
                },
                {
                    position: [109.010001, 34.372493],
                    radius: 3000,
                    color: 'green'
                },
                {
                    position: [108.874045, 34.307859],
                    radius: 6000,
                    color: 'blue'
                }
            ])

            var points = LBS.createPoints([108.874045, 34.307859], 300);


            addProperty(points, 'count', function () {
                return Math.floor(Math.random() * 100);
            });

            var heatmap = LBS.heatMap(map, points);
        }

    </script>
</body>

</html>